<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全部通用</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <script src="js/jquery.min.js" rel="script"></script>
    <script src="js/echarts_5_5_0.min.js"></script>
    <style>
        *{margin:0;padding:0}
        html,body{
            width:100%;
            height:100%;
        }
        #main{
            width:500px;
            height:650px;
            margin: 150px auto;
            border:1px solid #ddd;
            line-height: 10;
        }
        /*默认长宽比0.75*/
    </style>
</head>
<body>
<div id="main">

</div>
<script type="text/javascript">

     var myChart = echarts.init(document.getElementById('main'));

    $(document).ready(function() {
        var dataList=[ 
            {name: '安地镇', value: 10024,areaId:'1'},
            {name: '雅畈镇', value: 10024,areaId:'2'}
        ]
        

        $.get('js/ChongQing/500243.json', function (geoJson) {
            myChart.hideLoading();
            echarts.registerMap('', geoJson);

            myChart.setOption(option = {
                tooltip: {
                    formatter:function(params){
                        var num=0;
                        if(!isNaN(params.value))
                        {
                            num=params.value                            
                        }
                        return params.name+'<br>数量：'+num //鼠标悬浮上去显示
                    }
                },
                
                series: [
                    {
                        type: 'map',
                        zoom:1.2,
                        mapType: '', // 自定义扩展图表类型
                        label:{
                            normal: { //静态的时候展示样式
                                show: true, //是否显示地图省份得名称
                                textStyle: {
                                    color: "#1e1e1e"
                                },
                                formatter:function(e)
                                {
                                    var num=0;
                                    if(!isNaN(e.value))
                                    {
                                        num=e.value                            
                                    }
                                    return `{name|${e.name}}{value|${num}}`;  // 地名和数量一起显示                        
                                },
                                rich: {
                                    // `{name|${e.name}}{value|${e.value}}` 样式
                                        name:{
                                            fontSize: 10,
                                            backgroundColor:'white',
                                            padding:[3,2,2,2],
                                            verticalAlign:'middle',
                                            borderRadius:[2,0,0,2]
                                        },
                                        value:{
                                            color: "white",
                                            padding:[3,2,2,2],
                                            fontSize: 10,
                                            backgroundColor:'#ff9600',
                                            verticalAlign:'middle',
                                            borderRadius:[0,2,2,0]
                                        }
                                        
                                    }
                                
                            }
                        },
                        itemStyle: {
                            areaColor:'#eee', // 地图颜色
                            normal: {
                                label: {
                                    show: true
                                },
                                areaColor: { //地图显示渐变
                                    type: 'linear',
                                    x: 1,
                                    y: 1,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [
                                        { offset: 0, color: '#0c3a67' },
                                        { offset: 1, color: '#0c4179' }
                                    ],
                                    global: false // 缺省为 false
                                },
						        borderColor: '#53D9FF',
						        borderWidth: 1
                                
                            },
                            emphasis: { // 选中后颜色变化
                                label: {show: true},
                                areaColor: '#8dd7fc',
                                borderWidth: 1.6,
                                shadowBlur: 25,
                            }
                        },
                        data:dataList,
                        
                    }
                ]
            });
            //点击前解绑，防止点击事件触发多次
            myChart.off('click');
            myChart.on('click', echartsMapClick);
                    
        })

        
    })

    function echartsMapClick(params)
    {
        // console.log(params);
        alert(params.data.name+"---"+params.data.areaId);
    }
</script>
</body>
</html>